<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">
		<counter :count="0" v-on:inc="origin"></counter> <!-- 这就是父组件，由此传递数据给子组件 -->
		<counter :count="1" v-on:inc="origin"></counter>
		<div > {{total}} </div>
	
	</div>


	<!-- 总体上说，父组件通过属性值的形式向子组件传值，子组件通过事件触发的形式向父组件传值 -->




</body>
<script type="text/javascript">
	//这是子组件，
	var counter = {
		props:['count'],
		// props:['count'],//父组件给子组件传递数据，这里接收到父组件的数据，不能直接修改父组件传过来的数据这是vue中单向数据流的规定
		data:function() {
			return {
				number: this.count  //记住，这里是this.count
			}
		},

		template:"<div v-on:click='handle'> {{number}} </div>",
		//为解决单向数据数据流问题，这里是把父组件传递过来的数值赋予给另一个能量number, 这样一来，number既不是父组件向子组件传递数据的变量，既可以直接修改，又数值与父组件传递过来的一样
		
		
		methods:{
			handle:function() {
				// this.count++  //像这样直接修改父组件传来的值是会直接报错的
				this.number++;
				this.$emit("inc",1)
				//向父组件传递一个事件使父组件能够检测得到，其中这个事件命名任意，这里取inc
				//这里的2是这个事件向上传递的参数，后面被触发的函数能接收到这个参数
			}
		}
	};

	var vm = new Vue({
		el:"#app",
		data:{
			total:5
		},

		//在这里注册组件时，要注意几个问题，一个就是components千万不要忘了s,
		//还有，写下面的counter的形式，后面不需要写成字符串的形式，直接就counter：counter就行，前面的counter其实是自定义名称，要取其他名称也可以的

		components:{
			counter:counter,
		},
		methods:{
			origin:function(e) {
				this.total += e;   //这里的e便是子组件向父组件传递的参数，由上面的this.$emit("inc",1)很容易知道e的值便是1

			}
				
		}
		

	})



		
</script>
</html>